<template>
  <!-- <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button> -->
  <!-- <Search :schema="schema" /> -->
  <ElScrollbar class="test-box">
    <p>搜索组件</p>
    <SearchOptionsBox :formDataConfig="searchOptions" @search="searchData" />
    <el-divider></el-divider>
    <!-- <el-button type="primary" @click="dialogVisible = !dialogVisible">
    open
  </el-button> -->
    <p>弹框组件</p>
    <el-button type="primary" @click="showDialog(3)"> 弹窗组件(大) </el-button>
    <el-button type="primary" @click="showDialog(2)"> 弹窗组件(中) </el-button>
    <el-button type="primary" @click="showDialog(1)"> 弹窗组件(小) </el-button>
    <el-button type="primary" @click="showDialog('loading')">
      弹窗组件(loading)
    </el-button>
    <el-divider></el-divider>
    <p>上传组件</p>
    <el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
      <sc-upload-multiple
        v-model="fileurl4"
        draggable
        :limit="3"
        tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"
      ></sc-upload-multiple>
    </el-card>
    <el-divider></el-divider>
    <p>上传裁剪组件</p>
    <sc-upload
      v-model="fileurl2"
      title="开启剪裁"
      :cropper="true"
      :compress="1"
      :aspectRatio="1 / 1"
    ></sc-upload>
    <el-divider></el-divider>
    <p>字典选择器</p>
    <sc-select
      dic="bmlx"
      :objValueType="true"
      valueKey="cValue"
      clearable
      filterable
      style="width: 100%"
    ></sc-select>
    <el-divider></el-divider>
    <p>表格选择器</p>
    <el-card shadow="never" header="单选">
      <sc-table-select
        v-model="value2"
        :apiObj="apiObj"
        :params="params"
        :table-width="600"
        :props="props"
        @change="change"
      >
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="cName" label="姓名"></el-table-column>
      </sc-table-select>
    </el-card>
    <el-divider></el-divider>
    <p>表单表格组件</p>
    <el-card shadow="never">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="表格" prop="list">
          <sc-form-table
            ref="table"
            v-model="form.list"
            :addTemplate="addTemplate"
            drag-sort
            placeholder="暂无数据"
          >
            <el-table-column prop="time" label="时间" width="180">
              <template #default="scope">
                <el-time-select v-model="scope.row.time"></el-time-select>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
              <template #default="scope">
                <el-select v-model="scope.row.type" placeholder="请选择">
                  <el-option
                    v-for="item in typeDic"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="val" label="数量" min-width="180">
              <template #default="scope">
                <el-input
                  v-model="scope.row.val"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="open"
              label="checked"
              width="85"
              align="center"
            >
              <template #default="scope">
                <el-checkbox v-model="scope.row.checked"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="open" label="开关" width="80" align="center">
              <template #default="scope">
                <el-switch v-model="scope.row.open"></el-switch>
              </template>
            </el-table-column>
          </sc-form-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>

    <p>扩展时间线</p>
    <br />
    <div class="test-sjx">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :color="activity.color"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>

      <!-- <el-timeline class="pl-40">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :color="activity.color"
          :timestamp="activity.timestamp"
          placement="bottom"
        >
          <div class="message">
            vue-pure-admin是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
          </div>
        </el-timeline-item>
      </el-timeline> -->
    </div>
  </ElScrollbar>

  <sc-dialog :size="size" :loading="loading" v-model="dialog3" title="弹窗">
    <div v-for="v in 10000" :key="v">{{ v }}</div>
    <template #footer>
      <el-button @click="dialog3 = false">取 消</el-button>
      <el-button type="primary" @click="dialog3 = false">确 定</el-button>
    </template>
  </sc-dialog>
  <!-- <Dialog v-model="dialogVisible" title="弹框">
    <div v-for="v in 10000" :key="v">{{ v }}</div>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">提交</el-button>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog> -->
</template>

<script setup>
import { useRenderFlicker } from "@/components/ReFlicker";

import { reactive, getCurrentInstance, ref, markRaw } from "vue";
const activities = [
  {
    content: "支持圆点闪动",
    timestamp: 1111,
    icon: markRaw(useRenderFlicker()),
  },
  {
    content: "支持方形闪动",
    timestamp: 2222,
    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" })),
  },
  {
    content: "支持默认颜色",
    timestamp: 3333,
  },
  {
    content: "支持自定义颜色",
    timestamp: 44444,
    color: "#F56C6C",
  },
  {
    content: "支持自定义图标",
    timestamp: 55555,
    color: "transparent",
    // icon: useRenderIcon(Iphone, {
    //   color: "#0bbd87",
    // }),
  },
];
const { proxy } = getCurrentInstance();
// import { Dialog } from "@/components/Dialog";
import { ElButton } from "element-plus";

const dialogVisible = ref(false);
const dialog3 = ref(false);
const loading = ref(false);
// import { Search } from "@/components/Search";
// import { FormSchema } from "@/components/Form";
// import {
//   addDialog,
//   closeDialog,
//   updateDialog,
//   closeAllDialog,
// } from "@/components/ReDialog";

import SearchOptionsBox from "@/components/searchOptionsBox/index.vue";
// import Search from "@/components/Search";
const schema = reactive([
  {
    field: "field1",
    label: "input",
    component: "Input",
  },
]);
let ruleForm = ref(null);
const fileurl2 = ref("");
const fileurl4 = ref("");
let size = ref(2);
let value2 = reactive({});
let addTemplate = reactive({
  time: "",
  type: "",
  val: "",
  open: true,
  checked: false,
});
let typeDic = reactive([
  {
    label: "全局",
    value: "0",
  },
  {
    label: "局部",
    value: "1",
  },
]);
const submitForm = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      alert(JSON.stringify(form));
    } else {
      return false;
    }
  });
};
let form = reactive({
  title: "标题",
  list: [
    {
      time: "09:00",
      type: "1",
      val: "100",
      open: true,
      checked: true,
    },
    {
      time: "10:00",
      type: "0",
      val: "50",
      open: false,
      checked: true,
    },
  ],
});
const apiObj = proxy.$API.system.user.GetUserPageList;
const params = reactive({ cName: "" });
const props = {
  label: "cName",
  value: "id",
  keyword: "keyword",
};
const change = (val) => {
  proxy.$message("change事件，返回详情查看控制台");
  console.log(val);
  value2 = val;
  console.log(value2);
};
const showDialog = (val) => {
  loading.value = false;
  if (val === "loading") {
    loading.value = true;
    dialog3.value = true;
    return;
  }
  size = val;
  dialog3.value = true;
};
const searchOptions = ref([
  {
    label: "名称1",
    prop: "cRoleName",
    value: "",
    inputType: "String",
    optionType: "input",
    placeHolder: "请输入角色名称",
  },
  {
    label: "状态2",
    prop: "patient_status",
    type: "select",
    multiple: true,
    placeHolder: "请选择患者状态",
    selectOptions: [
      { label: "住院", value: 1 },
      { label: "出院", value: 2 },
      { label: "其他", value: 3 },
    ],
  },
  {
    label: "时间3",
    prop: "patient_time",
    dateType: "month", // date,month,year,dates
    type: "date",
    // format: "YYYY-MM-DD",
    placeHolder: "请选择患者状态",
  },
  {
    label: "名字4",
    prop: "cRoleName",
    value: "",
    inputType: "String",
    optionType: "input",
    placeHolder: "请输入角色名称",
  },
  {
    label: "名字5",
    prop: "cRoleName",
    value: "",
    inputType: "String",
    optionType: "input",
    placeHolder: "请输入角色名称",
  },
  // {
  //   label: "炒菜",
  //   prop: "patient_time3",
  //   type: "slot",
  //   slotName: "test111",
  //   // format: "YYYY-MM-DD",
  //   // placeHolder: "请选择患者状态",
  // },
]);
const searchData = (searchForm) => {
  console.log("searchForm", searchForm);
  // params.page = 1;
  // searchParams = JSON.parse(JSON.stringify(searchForm)); ///深拷贝
  // if (searchForm.patient_status) {
  //   //如果是get请求，为了业务就数组转存为string了
  //   searchParams.patient_status = JSON.stringify(searchParams.patient_status);
  // }

  // getDataList(); //获取数据，searchParams是搜索的值
};
</script>
<style lang="scss" scoped>
.test-box {
  padding-left: 20px;
  .test-sjx {
    padding-left: 10px;
  }
}
</style>
